<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .own-video-wrapper {
            margin: 0 auto;
        }
    </style>
</head>

<body>


    <!-- 自己独立开发一个播放器插件 -->

    <style>
        body {
            margin: 0;
        }

        .own-video {
            width: 100%;
            height: 100%;
        }

        .own-video-wrapper {
            position: relative;
            -webkit-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            overflow: hidden;
        }

        .own-video-control-bar {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: absolute;
            left: 0;
            bottom: 0;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.2))
        }

        .btn {
            display: inline-block;
            cursor: pointer;
            background: url("./image/song.png") no-repeat;
        }

        .play-btn {
            width: 60px;
            height: 60px;
        }

        .play-btn.play {
            background-position: 0 -60px;
        }

        .play-btn.play:hover {
            background-position: -60px -60px;
        }

        .play-btn.pause {
            background-position: 0 0;
        }

        .play-btn.pause:hover {
            background-position: -60px 0;
        }


        .time-wrapper {
            width: 300px;
            height: 60px;
            line-height: 60px;
            color: #fff;
        }

        .time-wrapper span {
            display: inline-block;
            margin: 0 3px;
        }

        .time-wrapper span:nth-child(1)::after {
            content: "/";
            margin-left: 3px;
            display: inline-block;
        }

        .bar-wrapper {
            width: 100%;
            height: 5px;
            background-color: #aaa;
            border-radius: 5px;
            position: absolute;
            top: 0;
            transform: translateY(-50%);
        }

        .bar-wrapper .inner-bar {
            /* width: 50%; */
            height: 100%;
            background-color: #14a9ff;
            border-radius: 5px;
        }

        .bar-wrapper .circle {
            display: block;
            width: 15px;
            height: 15px;
            position: absolute;
            /* left: 50%; */

            cursor: pointer;
            z-index: 100;

        }

        .bar-wrapper .circle.normal {
            background-color: #fff;
            border-radius: 50%;
            transform: translateY(-60%) translateX(-5px);
        }

        .bar-wrapper .circle.svg-circle {
            width: 18px;
            height: 18px;
            transform: translateY(-70%) translateX(-5px);
        }

        .rate-wrapper {
            position: relative;
            width: 50px;
            padding: 2px 5px;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            color: #fff;
            border: 1px solid #ddd;
            color: #eee;
        }

        .rate-wrapper:hover>.rateSelectorWrapper {
            display: block;
        }

        .rateSelectorWrapper {
            list-style: none;
            position: absolute;
            padding: 0;
            top: 0;
            display: none;
            border-radius: 2px;
            width: 100px;
            transform: translateY(-109%) translateX(-27%);
        }

        .rateSelectorWrapper li {
            text-align: center;
            color: #fff;
            cursor: pointer;
            padding: 10px 0;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .rateSelectorWrapper li:hover {
            color: #0ff;
        }

        .volume-wrapper {
            width: 16px;
            height: 16px;
            position: relative;
        }

        .volume-wrapper .volume-ico {
            width: 100%;
            height: 100%;
            cursor: pointer;
            background-image: url("./image/song.png");
            background-position: -64px -195px;
        }

        .volume-wrapper .volume-ico:hover {
            background-position: -80px -195px;
        }

        .volume-wrapper:hover>.volume-bar-wrapper {
            display: block;
        }

        .volume-wrapper .volume-bar-wrapper {
            display: none;
            position: absolute;
            width: 29px;
            height: 114px;
            position: absolute;
            z-index: 100;
            bottom: 100%;
            background: url("") no-repeat;
            transform: translateX(-25%);
        }

        .volume-bar-wrapper .volume-bg-bar {
            position: absolute;
            left: 12px;
            top: 11px;
            width: 5px;
            height: 90px;
        }

        .volume-bar-wrapper .volume-inner-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 5px;
            height: 50%;
            background: #14a9ff;
        }

        .volume-bar-wrapper .volume-bg-bar .volume-circle {
            position: absolute;
            left: 0;
            transform: translateX(-32%) translateY(50%);
            width: 12px;
            height: 12px;
            background: #fff;
            border-radius: 50%;
            bottom: 50%;
            cursor: pointer;
        }

        .video-full-screen {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            width: 100vw !important;
            height: 100vh !important;
        }

        .full-screen-wrapper {
            width: 50px;
            padding: 2px 5px;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            color: #fff;
            border: 1px solid #ddd;
            color: #eee;
        }
        .video-btn-container {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .video-btn-container > div {
            margin : 0 10px;
        }
    </style>

    <script>
        // 工具函数

        function parseTime(second) {
            // 87 01:27
            let m = parseInt(second / 60) + "";
            let s = parseInt(second % 60) + "";

            return `${m.padStart(2, "0")}:${s.padStart(2, "0")}`;
        }
        function getPercentage(video) {
            return video.currentTime / video.duration;
        }
        function getCurrentTime(video, per) {
            return video.duration * per;
        }

    </script>



    <script>
        // 传入视频资源路径，返回一个videoWrapperDOM
        function createVideo({
            videoUrl,
            width,
            height,
            dragSvg = ""
        }) {
            const videoWrapperDOM = initWrapperDOM(width, height);

            const video = document.createElement('video');
            video.classList.add("own-video")
            video.src = videoUrl;

            videoWrapperDOM.appendChild(video);


            function initWrapperDOM(width, height) { // 初始化外层DOM
                const videoWrapperDOM = document.createElement("div");
                videoWrapperDOM.classList.add("own-video-wrapper")
                videoWrapperDOM.style.width = width + "px";
                videoWrapperDOM.style.height = height + "px";
                return videoWrapperDOM;
            }

            let timeFrameId = null; // 播放时间展示动画

            const videoControl = {
                paused: true,//那个video自带的那个还不是好用
                videoDOM: null,
                play(playBtn) {
                    this.videoDOM.play();
                    updateTime();
                    playBtn.classList.remove("pause");
                    playBtn.classList.add("play");
                    this.paused = false;
                },
                pause(playBtn) {
                    this.videoDOM.pause();
                    cancelAnimationFrame(timeFrameId);
                    playBtn.classList.remove("play");
                    playBtn.classList.add("pause");
                    this.paused = true;
                },
                setVolume(v) {
                    v = v < 0 ? 0 : v;
                    this.videoDOM.volume = v;
                },
                w: 960, // 最开始播放器的大小
                h: 540,
                setVideoDOM(video, w, h) {
                    // 看似很奇怪
                    // 这个应该分一个模块，然后私有化，对外暴露方法，但作为练习我就没那么做了
                    this.videoDOM = video;
                    this.w = w;
                    this.h = h;
                    this.setVolume(.5);
                },
                setFullScreen(isFullScreen) {
                    if (isFullScreen) {
                        this.videoDOM.parentNode.classList.add("video-full-screen");
                    } else {
                        this.videoDOM.parentNode.classList.remove("video-full-screen");
                    }
                }
            }
            videoControl.setVideoDOM(video, width, height);

            let playBtn = document.createElement("div");
            function createPlayBtn(video) {
                // 播放按钮
                playBtn.classList.add("btn", "play-btn", "pause");
                playBtn.addEventListener("click", function () {
                    if (videoControl.paused) {
                        // 视频状态暂停播放
                        console.log("paused");
                        videoControl.play(this);
                    } else {
                        console.log("play");
                        videoControl.pause(this);
                    }

                })
                return playBtn;
            }

            const current = document.createElement("span"); // 当前播放时间
            const total = document.createElement("span"); // 总时间
            function updateTime() {
                const totalTime = parseTime(video.duration);
                const currentTime = parseTime(video.currentTime);
                current.innerText = currentTime;
                total.innerText = totalTime;

                timeFrameId = requestAnimationFrame(updateTime);
            }
            function createTimeDisplay(video) {
                // 01:00 / 5:20
                const timeDisplayWrapper = document.createElement("div");
                timeDisplayWrapper.classList.add("time-wrapper")

                timeDisplayWrapper.appendChild(current);
                timeDisplayWrapper.appendChild(total);


                video.addEventListener("canplaythrough", function () {
                    // 视频加载完成更新最新的播放时间
                    const totalTime = parseTime(video.duration);
                    const currentTime = parseTime(video.currentTime);
                    current.innerText = currentTime;
                    total.innerText = totalTime;
                })


                return timeDisplayWrapper

            }


            function exitFullscreen() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            }
            function createFullScreen() {
                const fullScreenWrapper = document.createElement("div");
                fullScreenWrapper.classList.add("full-screen-wrapper");
                const arr = ["全屏", "小屏"];
                fullScreenWrapper.innerText = arr[0];
                let status = "normal"; // 浏览器的一个状态 full normal
                document.addEventListener("fullscreenchange", function () {
                    console.log(document.fullscreenElement);
                    if (document.fullscreenElement !== null) {
                        // 进入全屏模式
                        status = "full";
                    } else {
                        status = 'normal';
                        exitFullscreen();
                        videoControl.setFullScreen(false);
                        fullScreenWrapper.innerText = arr[0];
                    }
                });
                fullScreenWrapper.addEventListener("click", function () {
                    if (status === 'normal') {
                        document.documentElement.requestFullscreen();
                        videoControl.setFullScreen(true);
                        this.innerText = arr[1];
                    }
                    if (status === 'full') {
                        exitFullscreen();
                        videoControl.setFullScreen(false);
                        this.innerText = arr[0];
                    }

                })

                return fullScreenWrapper;
            }

            function createVolumeWrapper(video) {
                const volumeWrapper = document.createElement('div');
                const volumeIco = document.createElement("div");
                const volumeBarWrapper = document.createElement('div');
                volumeWrapper.classList.add("volume-wrapper");
                volumeIco.classList.add("volume-ico");
                volumeBarWrapper.classList.add("volume-bar-wrapper");

                const bgBar = document.createElement("div");
                bgBar.classList.add("volume-bg-bar");
                const innerBar = document.createElement("div");
                innerBar.classList.add("volume-inner-bar");
                const circle = document.createElement("span");
                circle.classList.add("volume-circle");


                volumeBarWrapper.appendChild(bgBar);
                bgBar.appendChild(innerBar);
                bgBar.appendChild(circle);
                volumeWrapper.appendChild(volumeIco);
                volumeWrapper.appendChild(volumeBarWrapper);


                let clicked = false;
                let clientY, clickY;
                let barHeight = 0;
                circle.addEventListener("mousedown", function (e) {
                    barHeight = bgBar.clientHeight; // 最大拖拽范围
                    // 在父元素display:none，尺寸不准确
                    clicked = true; // 代表可以进行拖拽了
                    clickY = e.pageY
                    clientY = innerBar.clientHeight;
                })
                volumeWrapper.addEventListener("mousemove", function (e) {
                    if (!clicked) {
                        return; // 点击之后才能进行拖拽
                    }
                    const moveY = clickY - e.pageY; // 这条公式要注意一下
                    // 因为这个相比进度条拖拽它就是一个单向动画，只需要计算出当前的音量大小就好了
                    let h = clientY + moveY;
                    h = h < 0 ? 0 : h; // 边界处理
                    h = h > barHeight ? barHeight : h;
                    innerBar.style.height = h + "px";
                    circle.style.bottom = h + "px";
                    const v = h / barHeight; // 音量 
                    // 为了可阅读性，我尽量没有都挤在一行写，这是一个人的职业素养
                    videoControl.setVolume(v);

                })
                const stopDragVolumeBar = function () {
                    if (clicked) {
                        // 正在拖拽
                        clicked = false; // 取消拖拽状态
                    }
                }
                document.addEventListener("mouseup", stopDragVolumeBar)
                volumeWrapper.addEventListener("mouseleave", stopDragVolumeBar);


                return volumeWrapper;
            }



            function createDragBar(video, dragSvg) {
                // 播放进度条
                const barWrapper = document.createElement("div");
                barWrapper.classList.add("bar-wrapper");
                const innerBar = document.createElement("div");
                innerBar.classList.add("inner-bar");
                barWrapper.appendChild(innerBar);
                const circle = document.createElement("span");
                circle.classList.add("circle");
                if (dragSvg) {
                    // 自定义svg拖拽图标
                    circle.innerHTML = dragSvg;
                    circle.classList.add("svg-circle")
                } else {
                    circle.classList.add("normal");
                }

                window.circle = circle;
                barWrapper.appendChild(circle);
                let frameId = null; // 拖拽的时候需要取消动画


                // 拖拽功能
                // 我需要知道总的进度条的长度
                // 还需要知道拖动的距离
                // 拖动的距离 / 总的进度条长度 = currentTime / totalTime

                let totalWidth = 0;
                let totalTime = 0;
                video.addEventListener("canplaythrough", function () {
                    // 视频资源加载完成
                    totalTime = this.duration;
                    let clicked = false;
                    let clientX, clickX;
                    circle.addEventListener("mousedown", function (e) {
                        // 如果获取元素属性为最开始，那么全屏缩放会出现BUG
                        totalWidth = barWrapper.offsetWidth; // 为了适应元素的最新大小
                        // 暂停播放
                        // 点击时记住点击瞬间的位置
                        cancelAnimationFrame(frameId); // 取消播放动画 优化性能减少不必要的麻烦
                        // 不然你操控不了元素
                        videoControl.pause(playBtn);
                        clientX = this.offsetLeft;
                        clickX = e.pageX;
                        clicked = true; // 进入拖拽状态

                    })
                    document.addEventListener("mousemove", function (e) {
                        if (!clicked) {
                            return; // 非拖拽状态
                        }
                        cancelAnimationFrame(frameId);
                        let moveX = e.pageX - clickX;
                        let per = (clientX + moveX) / totalWidth;
                        per = per < 0 ? 0 : per; // 做边界处理
                        per = per > 1 ? 1 : per;
                        per = per * 100 + "%";
                        circle.style.left = per;
                        innerBar.style.width = per;
                    })
                    document.addEventListener("mouseup", function (e) {
                        if (clicked) {
                            clicked = false;
                            let moveX = e.pageX - clickX;
                            let per = (clientX + moveX) / totalWidth;
                            video.currentTime = getCurrentTime(video, per);
                            per = per > 1 ? 1 : per;
                            per = per < 0 ? 0 : per;
                            per = per * 100 + "%";
                            circle.style.left = per;
                            innerBar.style.width = per;
                            videoControl.play(playBtn);
                            barAnimate();
                        }

                    })
                })


                function barAnimate() {
                    const per = getPercentage(video) * 100 + "%";

                    circle.style.left = per;
                    innerBar.style.width = per;
                    frameId = requestAnimationFrame(barAnimate);
                }
                barAnimate();

                return barWrapper;
            }



            function createPlayRate(video) {
                // 倍速播放
                const rateWrapper = document.createElement("div");
                rateWrapper.classList.add("rate-wrapper");
                const currentRateWrapper = document.createElement('div');

                currentRateWrapper.innerText = "1X";
                const ul = document.createElement("ul");
                ul.classList.add("rateSelectorWrapper");
                ul.innerHTML = `
                    <li>2X</li>
                    <li>1.5X</li>
                    <li>1X</li>
                    <li>.5X</li>    
                `
                ul.addEventListener("click", function (e) {
                    if (e.target.tagName === "LI") {
                        currentRateWrapper.innerText = e.target.innerText;
                        const rate = parseFloat(e.target.innerText);
                        video.playbackRate = rate;
                    }
                })
                rateWrapper.appendChild(currentRateWrapper);
                rateWrapper.appendChild(ul);
                return rateWrapper;

            }

            function initBar() {
                const bar = document.createElement("div");
                bar.classList.add("own-video-control-bar");
                return bar;
            }


            const bar = initBar();
            const timeDisplayWrapper = createTimeDisplay(video);
            const dragBar = createDragBar(video, dragSvg);
            const rateWrapper = createPlayRate(video);

            // 为了将右边的按钮聚起来而已，我觉得那样会更好看
            const container = document.createElement("div");
            container.classList.add("video-btn-container");
            container.appendChild(rateWrapper);
            container.appendChild(createVolumeWrapper(video));
            container.appendChild(createFullScreen());


            bar.appendChild(createPlayBtn(video));
            bar.appendChild(timeDisplayWrapper);
            bar.appendChild(dragBar);
            bar.appendChild(container);
            
            videoWrapperDOM.appendChild(bar);

            return videoWrapperDOM;
        }




        document.body.appendChild(createVideo({
            videoUrl: "/index.mp4",
            width: 960,
            height: 540,
            dragSvg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" width="18" height="18"
            preserveAspectRatio="xMidYMid meet"
            style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px);">
            <defs>
                <clipPath id="__lottie_element_25">
                    <rect width="18" height="18" x="0" y="0"></rect>
                </clipPath>
            </defs>
            <g clip-path="url(#__lottie_element_25)">
                <g transform="matrix(1,0,0,1,8.937000274658203,8.25)" opacity="0.14" style="display: block;">
                    <g opacity="1" transform="matrix(1,0,0,1,0.07500000298023224,1.2130000591278076)">
                        <path fill="rgb(251,114,153)" fill-opacity="1"
                            d=" M9,-3.5 C9,-3.5 9,3.5 9,3.5 C9,5.707600116729736 7.207600116729736,7.5 5,7.5 C5,7.5 -5,7.5 -5,7.5 C-7.207600116729736,7.5 -9,5.707600116729736 -9,3.5 C-9,3.5 -9,-3.5 -9,-3.5 C-9,-5.707600116729736 -7.207600116729736,-7.5 -5,-7.5 C-5,-7.5 5,-7.5 5,-7.5 C7.207600116729736,-7.5 9,-5.707600116729736 9,-3.5z">
                        </path>
                    </g>
                </g>
                <g transform="matrix(1,0,0,1,9.140999794006348,8.67199993133545)" opacity="0.28"
                    style="display: block;">
                    <g opacity="1" transform="matrix(1,0,0,1,-0.1509999930858612,0.7990000247955322)">
                        <path fill="rgb(251,114,153)" fill-opacity="1"
                            d=" M8,-3 C8,-3 8,3 8,3 C8,4.931650161743164 6.431650161743164,6.5 4.5,6.5 C4.5,6.5 -4.5,6.5 -4.5,6.5 C-6.431650161743164,6.5 -8,4.931650161743164 -8,3 C-8,3 -8,-3 -8,-3 C-8,-4.931650161743164 -6.431650161743164,-6.5 -4.5,-6.5 C-4.5,-6.5 4.5,-6.5 4.5,-6.5 C6.431650161743164,-6.5 8,-4.931650161743164 8,-3z">
                        </path>
                    </g>
                </g>
                <g transform="matrix(0.9883429408073425,-0.7275781631469727,0.6775955557823181,0.920446515083313,7.3224687576293945,-0.7606706619262695)"
                    opacity="1" style="display: block;">
                    <g opacity="1"
                        transform="matrix(0.9937776327133179,-0.11138220876455307,0.11138220876455307,0.9937776327133179,-2.5239999294281006,1.3849999904632568)">
                        <path fill="rgb(0,0,0)" fill-opacity="1"
                            d=" M0.75,-1.25 C0.75,-1.25 0.75,1.25 0.75,1.25 C0.75,1.663925051689148 0.4139249920845032,2 0,2 C0,2 0,2 0,2 C-0.4139249920845032,2 -0.75,1.663925051689148 -0.75,1.25 C-0.75,1.25 -0.75,-1.25 -0.75,-1.25 C-0.75,-1.663925051689148 -0.4139249920845032,-2 0,-2 C0,-2 0,-2 0,-2 C0.4139249920845032,-2 0.75,-1.663925051689148 0.75,-1.25z">
                        </path>
                    </g>
                </g>
                <g transform="matrix(1.1436611413955688,0.7535901665687561,-0.6317168474197388,0.9587040543556213,16.0070743560791,2.902894973754883)"
                    opacity="1" style="display: block;">
                    <g opacity="1"
                        transform="matrix(0.992861807346344,0.1192704513669014,-0.1192704513669014,0.992861807346344,-2.5239999294281006,1.3849999904632568)">
                        <path fill="rgb(0,0,0)" fill-opacity="1"
                            d=" M0.75,-1.25 C0.75,-1.25 0.75,1.25 0.75,1.25 C0.75,1.663925051689148 0.4139249920845032,2 0,2 C0,2 0,2 0,2 C-0.4139249920845032,2 -0.75,1.663925051689148 -0.75,1.25 C-0.75,1.25 -0.75,-1.25 -0.75,-1.25 C-0.75,-1.663925051689148 -0.4139249920845032,-2 0,-2 C0,-2 0,-2 0,-2 C0.4139249920845032,-2 0.75,-1.663925051689148 0.75,-1.25z">
                        </path>
                    </g>
                </g>
                <g transform="matrix(1,0,0,1,8.890999794006348,8.406000137329102)" opacity="1" style="display: block;">
                    <g opacity="1" transform="matrix(1,0,0,1,0.09099999815225601,1.1009999513626099)">
                        <path fill="rgb(255,255,255)" fill-opacity="1"
                            d=" M7,-3 C7,-3 7,3 7,3 C7,4.379749774932861 5.879749774932861,5.5 4.5,5.5 C4.5,5.5 -4.5,5.5 -4.5,5.5 C-5.879749774932861,5.5 -7,4.379749774932861 -7,3 C-7,3 -7,-3 -7,-3 C-7,-4.379749774932861 -5.879749774932861,-5.5 -4.5,-5.5 C-4.5,-5.5 4.5,-5.5 4.5,-5.5 C5.879749774932861,-5.5 7,-4.379749774932861 7,-3z">
                        </path>
                        <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"
                            stroke="rgb(0,0,0)" stroke-opacity="1" stroke-width="1.5"
                            d=" M7,-3 C7,-3 7,3 7,3 C7,4.379749774932861 5.879749774932861,5.5 4.5,5.5 C4.5,5.5 -4.5,5.5 -4.5,5.5 C-5.879749774932861,5.5 -7,4.379749774932861 -7,3 C-7,3 -7,-3 -7,-3 C-7,-4.379749774932861 -5.879749774932861,-5.5 -4.5,-5.5 C-4.5,-5.5 4.5,-5.5 4.5,-5.5 C5.879749774932861,-5.5 7,-4.379749774932861 7,-3z">
                        </path>
                    </g>
                </g>
                <g transform="matrix(1,0,0,1,8.89900016784668,8.083999633789062)" opacity="1" style="display: block;">
                    <g opacity="1" transform="matrix(1,0,0,1,-2.5239999294281006,1.3849999904632568)">
                        <path fill="rgb(0,0,0)" fill-opacity="1"
                            d=" M0.875,-1.125 C0.875,-1.125 0.875,1.125 0.875,1.125 C0.875,1.607912540435791 0.48291251063346863,2 0,2 C0,2 0,2 0,2 C-0.48291251063346863,2 -0.875,1.607912540435791 -0.875,1.125 C-0.875,1.125 -0.875,-1.125 -0.875,-1.125 C-0.875,-1.607912540435791 -0.48291251063346863,-2 0,-2 C0,-2 0,-2 0,-2 C0.48291251063346863,-2 0.875,-1.607912540435791 0.875,-1.125z">
                        </path>
                    </g>
                </g>
                <g transform="matrix(1,0,0,1,14.008999824523926,8.083999633789062)" opacity="1" style="display: block;">
                    <g opacity="1" transform="matrix(1,0,0,1,-2.5239999294281006,1.3849999904632568)">
                        <path fill="rgb(0,0,0)" fill-opacity="1"
                            d=" M0.8999999761581421,-1.100000023841858 C0.8999999761581421,-1.100000023841858 0.8999999761581421,1.100000023841858 0.8999999761581421,1.100000023841858 C0.8999999761581421,1.596709966659546 0.4967099726200104,2 0,2 C0,2 0,2 0,2 C-0.4967099726200104,2 -0.8999999761581421,1.596709966659546 -0.8999999761581421,1.100000023841858 C-0.8999999761581421,1.100000023841858 -0.8999999761581421,-1.100000023841858 -0.8999999761581421,-1.100000023841858 C-0.8999999761581421,-1.596709966659546 -0.4967099726200104,-2 0,-2 C0,-2 0,-2 0,-2 C0.4967099726200104,-2 0.8999999761581421,-1.596709966659546 0.8999999761581421,-1.100000023841858z">
                        </path>
                    </g>
                </g>
            </g>
        </svg>`
        }));
    </script>
</body>

</html>